<template>
	<view class="page">
		<view class="bgBox">
			<view class="mainBox">
				<view class="mainTop">
					<view class="headPic">
						<image class="pic" style="border-radius: 100%;" :src="mood.imgurl" mode="aspectFill"
							v-if="mood.imgurl"></image>
						<image class="pic" src="@/static/pic/touxiang.png" mode="aspectFill" v-else></image>
					</view>
					<view class="authentication">
						<view class="status" v-if="mood.CertStatus.value==2">
							{{mood.nickName}}
						</view>
						<view class="status" v-if="mood.CertStatus.value==1" @click="goCert">
							认证中 <image class="rightIcon" src="@/static/pic/right.png" mode="widthFix"></image>
						</view>
						<view class="status" v-else-if="mood.CertStatus.value==0" @click="goCert">
							未认证<image class="rightIcon" src="@/static/pic/right.png" mode="widthFix"></image>
						</view>
						<view class="text" v-else-if="mood.CertStatus.value==2" @click='management(1)'>
							{{mood.fleet}}
						</view>
						<view class="text" v-else>
							完成司机认证方可接单
						</view>
					</view>
					<image class="setting" src="@/static/pic/set2.png" mode="widthFix" @click='management(5)'></image>
				</view>
				<view class="moneyBox">
					<view class="totalBox">
						<view class="label">
							总余额
						</view>
						<view class="balance">
							¥ {{totalAmount || 0}}
						</view>
					</view>
					<view class="moneyBar" @click="management(7)">
						钱包
					</view>
				</view>
				<!-- 司机行为分 -->
				<view class="list">
					<view class="item" @click="tojifen">
						<image class="listIcon" src="@/static/pic/order.png" mode="widthFix"></image>
						<view class="listText">
							行为分
							<span class="bold" v-if="mood.CertStatus.value!=2">0</span>
							<span class="bold" v-else>{{mood.jifen ? mood.jifen:0}}</span>
						</view>
					</view>

					<view class="item">
						<image class="listIcon" src="@/static/pic/zhong.png" mode="widthFix"></image>
						<view class="listText">
							准点率
							<span class="bold" v-if="mood.CertStatus.value!=2">0</span>
							<span class="bold" v-else>{{mood.punctualityRate ? mood.punctualityRate:0}}%</span>
						</view>
					</view>
					<view class="item" @click='management(10)'>
						<image class="listIcon" src="@/static/pic/bookqian.png" mode="widthFix"></image>
						<view class="listText">
							优惠券
							<span class="bold">{{mood.couponNumber}}</span>
						</view>
					</view>
				</view>
				<!-- 车辆信息 -->
				<view class="carBox" v-if="mood.driverCar">
					<view class="carBoxLeft">
						<view class="Number">
							{{mood.driverCar.numberplate}}
						</view>
						<view class="carInfo">
							{{mood.driverCar.vehicleType}}<span
								style="margin-left: 16rpx;">{{mood.driverCar.brandModel}}</span>
						</view>
						<view class="defaultBtn">
							默认车辆
						</view>
					</view>
					<image class="carPic" src="@/static/pic/xiaomian.png" mode="widthFix"></image>
				</view>
				<!-- 车辆信息 -->
				<view class="carBox" v-else style="align-items: center;padding-top: 0%;padding-bottom: 10rpx;">
					<!-- v-else -->
					<view class="carBoxLeft" @click='management(0)'>
						<view class="Number" style="display: flex;align-items: center;">
							<view class="" style="margin-right: 15rpx;">
								添加车辆
							</view>
							<image src="@/static/order/jiahao.png" mode="aspectFill"
								style="width: 33rpx;height: 33rpx;"></image>
						</view>
						<view class="carInfo">
							扫描行驶证快速添加
						</view>
					</view>
					<image class="carPic" src="@/static/order/noCar.png" mode="widthFix" style="width: 275rpx;"></image>
				</view>

				<!-- 快捷功能 -->
				<view class="menuBox">
					<view class="tit">
						快捷功能
					</view>
					<view class="menuList">
						<view class="menuItem" @click='management(6)'>
							<image class="menuIcon" src="@/static/pic/zhifeiji.png" mode="widthFix"></image>
							<view class="itemTit">
								发送平台建单
							</view>
						</view>
						<view class="menuItem" @click='management(16)'>
							<image class="menuIcon" src="@/static/pic/taizhang.png" mode="widthFix"></image>
							<view class="itemTit">
								
								司机台账
							</view>
						</view>
						<view class="menuItem" @click='management(8)'>
							<image class="menuIcon" src="@/static/pic/ground3.png" mode="widthFix"></image>
							<view class="itemTit">
								扫码建单
							</view>
						</view>
						<view class="menuItem" @click='management(0)'>
							<image class="menuIcon" src="@/static/pic/hc.png" mode="widthFix"></image>
							<view class="itemTit">
								车辆管理
							</view>
						</view>
						<view class="menuItem" @click='management(12)'>
							<image class="menuIcon" src="@/static/pic/xiangzi.png" mode="widthFix"></image>
							<view class="itemTit">
								车队列表
							</view>
						</view>
						<view class="menuItem" @click='management(11)'>
							<image class="menuIcon" src="@/static/login/index7.png" mode="widthFix"></image>
							<view class="itemTit">
								地址库管理
							</view>
						</view>

						<view class="menuItem" @click='management(3)'>
							<image class="menuIcon" src="@/static/pic/g4.png" mode="widthFix"></image>
							<view class="itemTit">
								法律条规
							</view>
						</view>
						<view class="menuItem" @click='management(9)'>
							<image class="menuIcon" src="@/static/pic/erji.png" mode="widthFix"></image>
							<view class="itemTit">
								客服中心
							</view>
						</view>
						<view class="menuItem" @click='management(13)'>
							<image class="menuIcon" src="@/static/baoxian.png" mode="widthFix"></image>
							<view class="itemTit">
								保险咨询
							</view>
						</view>
						<view class="menuItem" @click='management(14)'>
							<image class="menuIcon" src="@/static/tuiguang.png" mode="widthFix"></image>
							<view class="itemTit">
								推广中心
							</view>
						</view>
						<view class="menuItem" @click='management(15)'>
							<view class="reddot" v-if="reddot==1"></view>
							<image class="menuIcon" src="@/static/order/we.png" mode="widthFix"></image>
							<view class="itemTit">
								关于我们
							</view>
						</view>
					</view>
				</view>
				<view style="height:84rpx;width: 100%;"></view>
			</view>
		</view>
	</view>
</template>

<script>
	import order from "@/api/modules/order.js"
	import driver from "@/api/modules/driver.js"
	export default {
		data() {
			return {
				src: '',
				number: '未选择车辆',
				punctualityRate: 0.0,
				mood: {
					imgurl: '',
					username: '未设置',
					CertStatus: {
						value: 0
					},
					fleet: '',
					jifen: 0,
					punctuality: 100,
					driverCar: '未认证车辆'
				},
				status: 0, //0代表未认证  1 代表认证
				totalAmount: "",
				showTotalAmount: "*****",
				eyeActive: false,
				reddot:0,
				vision:"1.1.1",
				CertStatus:0
			}
		},
		onShow() {
			this.cread();
			let that = this 
			this.reddot = 0;
			let systemInfo = uni.getSystemInfoSync();
			let banebn =  systemInfo.appWgtVersion;
			driver.queryVision({}).then((res) => {
				var date = res.data.data;
				console.log(banebn,date)
			 	that.vision = date.driverApp
				if(banebn!=date.driverApp){
					that.reddot = 1;
				}
			})
		},
		methods: {
			goCert() {
				uni.navigateTo({
					url: '/subPackages/driver/franchise/franchise'
				})
			},
			tojifen() {
				if (this.mood.CertStatus.value != 2) {
					uni.showToast({
						title: '司机未认证',
						icon: 'none'
					})
					return
				}
				uni.navigateTo({
					url: '/pages/my/jifen/jifen'
				})
			},
			activeEyes() {
				this.eyeActive = !this.eyeActive
				if (this.eyeActive) {
					this.showTotalAmount = this.totalAmount
				} else {
					this.showTotalAmount = '*****'
				}
			},
			modityDriver() {
				//console.log(1111)
				uni.navigateTo({
					url: '/subPackages/driver/franchise/franchise?id=1'
				})
			},
			async cread() {
				let res = await this.$http.driver.getUserInfoDetail();
				if (res.data.data) {
					this.mood = res.data.data
					this.$store.state.users.userName = this.mood.username
					this.totalAmount = res.data.data.totalAmount
					if(this.mood.CertStatus.value==3){
						this.mood.CertStatus.value=0
					}
					// var sp = parseInt(this.mood.punctuality) + parseInt(this.mood.notPunctuality);
					// if(sp>=10){
					// 	this.punctualityRate = ((parseInt(this.mood.punctuality)/sp)*100).toFixed(2);
					// }
				}
				// let res2 = await this.$http.users.myMoneyWallet();
				// //console.log(res2)
				// if (res.data.code == 200) {
				// 	this.totalAmount=res.data.totalAmount
				// }
			},

			management(e) {
				if (e != 5) {
					if (this.mood.CertStatus.value != 2) {
						uni.showToast({
							title: '司机未认证',
							icon: 'none'
						})
						return
					}
				}

				let url = ''
				switch (e) {
					case 0:
						url = '/pages/my/carManage/carManage';
						break;
					case 1:
						url = '/pages/my/fleetManage/fleetManage?Join=2';
						break;
					case 2:
						url = '/pages/my/MyOrder/MyOrder';
						break;
					case 3:
						url = '/subPackages/my/legalProvisions/legalProvisions';
						break;
					case 5:
						url = '/pages/my/setMy/setMy';
						break;
					case 6:
						url = '/pages/my/platform/platform';
						break;
					case 7:
						url = '/pages/my/wallet/wallet'
						break;
					case 8:
						url = '/subPackages/my/scanning/scanning'
						break;
					case 9:
						url = '/pages/message/Customer'
						break;
					case 10:
						url = '/pages/my/myjuan/myjuan'
						break;
					case 11:
						url = '/subPackages/my/addressManagement/addressManagement'
						break;
					case 12:
						url = '/pages/fleet/fleet'
						break;
					case 13:
						url = '/subPackages/my/baoxian/baoxian'
						break;
					case 14:
						url = '/pages/my/promotion/promotion'
						break;
					case 15:
						url = '/pages/my/adbouWe/adbouWe?reddot='+this.reddot+'&vision='+this.vision
						break;
					case 16:
						url = '/subPackages/my/taizhang/taizhang'
						break;
				}
				uni.navigateTo({
					url
				})
			}
		},

	}
</script>

<style lang="scss">
	.reddot{
		position: absolute;
		    width: 6px;
		    height: 6px;
		    background: #DD001B;
		    border: 0px;
		    border-radius: 3px;
		    right: 30px;
	}
	.page {
		height: 100vh;
		width: 100vw;
		overflow: scroll;
		background-color: #F3F3F3;
	}

	.bgBox {
		width: 750rpx;
		height: 539rpx;
		background: #29B0FD;
		border-radius: 0rpx 0rpx 50rpx 50rpx;
		position: relative;
	}

	.mainBox {
		width: 100%;
		padding: 0 30rpx;
		box-sizing: border-box;
		position: absolute;
		top: 154rpx;
	}

	.mainTop {
		width: 100%;
		display: flex;
		align-items: center;

		.headPic {
			width: 155rpx;
			height: 155rpx;
			margin-right: 18rpx;
			background: #FFFFFF;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;

			.pic {
				width: 138rpx;
				height: 138rpx;
			}
		}

		.authentication {
			display: flex;
			flex-direction: column;
			justify-content: center;

			.status {
				font-size: 40rpx;
				font-family: PingFang SC;
				font-weight: 600;
				color: #FFFFFF;

				.rightIcon {
					width: 16rpx;
					height: 27rpx;
					margin-left: 20rpx;
				}
			}

			.text {
				margin-top: 10rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #CDECFD;
			}
		}

		.setting {
			height: 40rpx;
			width: 40rpx;

			margin-left: auto;
		}
	}

	.moneyBox {
		margin: 42rpx auto 0;
		width: 626rpx;
		box-sizing: border-box;
		height: 130rpx;
		background-size: cover;
		background-repeat: no-repeat;
		background-image: url('@/static/pic/blank.png');
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-left: 41rpx;
		padding-right: 32rpx;

		.totalBox {
			.label {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #BCBBBB;
			}

			.balance {
				font-size: 36rpx;
				font-family: DIN;
				font-weight: bold;
				color: #FFFFFF;
			}
		}

		.moneyBar {
			text-align: center;
			line-height: 52rpx;
			width: 120rpx;
			height: 52rpx;
			background: #29B0FD;
			border-radius: 26rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF
		}
	}

	.list {
		width: 690rpx;
		height: 229rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		position: relative;
		z-index: 200;
		top: -15rpx;
		display: flex;
		align-items: center;


		.item {
			width: calc(100% / 3);
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.listIcon {
				width: 94rpx;
				height: 94rpx;
			}

			.listText {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #262626;
			}

			.bold {
				font-size: 30rpx;
				font-family: DIN;
				font-weight: bold;
				color: #262626;
				margin-left: 7rpx;
			}
		}

	}

	.carBox {
		width: 690rpx;
		margin: 15rpx 0 30rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		display: flex;
		padding: 42rpx 35rpx 35rpx 35rpx;
		box-sizing: border-box;

		.carBoxLeft {
			display: flex;
			flex-direction: column;

			.Number {
				font-size: 34rpx;
				font-family: PingFang SC;
				font-weight: 600;
				color: #262626;
				margin-bottom: 15rpx;
			}

			.carInfo {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 300;
				color: #262626;
				margin-bottom: 15rpx;
			}

			.defaultBtn {
				width: 124rpx;
				height: 42rpx;
				background: #FFFFFF;
				border: 1px solid #0094E9;
				border-radius: 4rpx;
				text-align: center;
				line-height: 42rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #0094E9;
			}
		}

		.carPic {
			width: 241.8rpx;
			height: 125.8rpx;
			margin-top: 19rpx;
			margin-left: auto;
		}
	}

	.menuBox {
		width: 690rpx;

		background: #FFFFFF;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 43rpx 30rpx 63rpx;

		.tit {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 600;
			color: #262626;
			margin-left: 3rpx;
		}

		.menuList {
			display: flex;
			flex-wrap: wrap;
			width: 100%;

			.menuItem {
				margin-top: 63rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				position: relative;
				width: calc(100% / 4);

				.menuIcon {
					height: 42rpx;
					width: 42rpx;
				}

				.itemTit {
					margin-top: 24rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #262626;
				}
			}
		}

	}
</style>